import { View, Text, Swiper, SwiperItem, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './pcfw.scss';

export default function PcFwPage() {
  // 服务轮播图数据
  const serviceBanners = [
    {
      id: 1,
      image: 'https://example.com/service-banner1.jpg',
      title: '专业维修服务',
      subtitle: '快速响应，专业解决',
      tag: '24小时在线',
      description: '专业团队，快速响应，为您提供最优质的维修服务'
    },
    {
      id: 2,
      image: 'https://example.com/service-banner2.jpg',
      title: '上门服务',
      subtitle: '足不出户，享受服务',
      tag: '免费上门',
      description: '专业技师上门服务，让您足不出户享受专业维修'
    },
    {
      id: 3,
      image: 'https://example.com/service-banner3.jpg',
      title: '品质保障',
      subtitle: '原厂配件，质量保证',
      tag: '质保一年',
      description: '使用原厂配件，提供一年质保，让您无后顾之忧'
    }
  ];

  // 服务分类数据 - PC端可以展示更多分类
  const serviceCategories = [
    { id: 1, name: '手机维修', icon: '📱', color: '#4CAF50', count: 156 },
    { id: 2, name: '电脑维修', icon: '💻', color: '#2196F3', count: 89 },
    { id: 3, name: '家电维修', icon: '🏠', color: '#FF9800', count: 234 },
    { id: 4, name: '数码维修', icon: '📷', color: '#9C27B0', count: 67 },
    { id: 5, name: '网络服务', icon: '🌐', color: '#00BCD4', count: 123 },
    { id: 6, name: '数据恢复', icon: '💾', color: '#607D8B', count: 45 },
    { id: 7, name: '软件安装', icon: '💿', color: '#795548', count: 78 },
    { id: 8, name: '系统优化', icon: '⚡', color: '#E91E63', count: 92 }
  ];

  // 热门服务数据
  const hotServices = [
    {
      id: 1,
      name: 'iPhone屏幕更换',
      price: '¥299起',
      originalPrice: '¥399',
      rating: 4.8,
      orders: 1234,
      image: 'https://example.com/iphone-screen.jpg',
      tags: ['原厂配件', '快速维修', '质保一年']
    },
    {
      id: 2,
      name: '笔记本清灰保养',
      price: '¥99起',
      originalPrice: '¥129',
      rating: 4.9,
      orders: 856,
      image: 'https://example.com/laptop-clean.jpg',
      tags: ['专业清灰', '延长寿命', '提升性能']
    },
    {
      id: 3,
      name: '空调清洗维修',
      price: '¥199起',
      originalPrice: '¥259',
      rating: 4.7,
      orders: 567,
      image: 'https://example.com/ac-repair.jpg',
      tags: ['深度清洗', '杀菌消毒', '节能环保']
    },
    {
      id: 4,
      name: '数据恢复服务',
      price: '¥399起',
      originalPrice: '¥599',
      rating: 4.6,
      orders: 234,
      image: 'https://example.com/data-recovery.jpg',
      tags: ['专业恢复', '成功率95%', '隐私保护']
    }
  ];

  // 服务资讯数据
  const serviceNews = [
    {
      id: 1,
      title: '夏季空调保养小贴士',
      content: '夏季来临，空调使用频繁，如何正确保养空调？本文为您详细介绍空调保养的正确方法。',
      time: '2024-06-14',
      views: 1234,
      category: '家电维修'
    },
    {
      id: 2,
      title: '手机进水急救指南',
      content: '手机进水不要慌，这些急救方法能帮你。正确的处理方式可以大大提高手机救活的概率。',
      time: '2024-06-13',
      views: 987,
      category: '手机维修'
    },
    {
      id: 3,
      title: '电脑系统优化技巧',
      content: '电脑运行缓慢？这些系统优化技巧能让您的电脑重获新生，提升运行速度。',
      time: '2024-06-12',
      views: 756,
      category: '电脑维修'
    }
  ];

  // 处理服务分类点击
  const handleCategoryClick = (category) => {
    Taro.navigateTo({
      url: `/pages/FJ/fj?category=${category.name}`
    });
  };

  // 处理热门服务点击
  const handleServiceClick = (service) => {
    Taro.navigateTo({
      url: `/pages/Pay/Pay?service=${service.name}`
    });
  };

  // 处理轮播图点击
  const handleBannerClick = (banner) => {
    Taro.showToast({
      title: `查看${banner.title}`,
      icon: 'none'
    });
  };

  // 处理导航点击
  const handleNavClick = (navItem) => {
    switch (navItem) {
      case '首页':
        Taro.navigateTo({ url: '/pages/index/index' });
        break;
      case '服务':
        Taro.navigateTo({ url: '/pages/FW/fw' });
        break;
      case '订单':
        Taro.navigateTo({ url: '/pages/Pay/Pay' });
        break;
      case '我的':
        Taro.navigateTo({ url: '/pages/login/login' });
        break;
      default:
        Taro.showToast({
          title: `点击了${navItem}`,
          icon: 'none'
        });
    }
  };

  return (
    <View className="pc-fw-page">
      {/* 顶部导航 - PC端更复杂的导航 */}
      <View className="header">
        <View className="logo-area">
          <Text className="logo">及时修</Text>
          <Text className="slogan">专业维修服务平台</Text>
        </View>
        <View className="nav-menu">
          <Text className="nav-item" onClick={() => handleNavClick('首页')}>首页</Text>
          <Text className="nav-item active" onClick={() => handleNavClick('服务')}>服务</Text>
          <Text className="nav-item" onClick={() => handleNavClick('订单')}>订单</Text>
          <Text className="nav-item" onClick={() => handleNavClick('我的')}>我的</Text>
        </View>
        <View className="header-actions">
          <Text className="icon">🔍</Text>
          <Text className="icon">📞</Text>
          <Text className="icon">💬</Text>
          <Text className="icon">👤</Text>
        </View>
      </View>

      {/* 主体内容区域 */}
      <View className="main-content">
        {/* 轮播图区域 */}
        <View className="banner-section">
          <View className="section-title">服务推荐</View>
          <View className="banner-container">
            <Swiper
              className="banner-swiper"
              indicatorColor="#999"
              indicatorActiveColor="#333"
              circular
              autoplay
              interval={4000}
              indicatorDots
            >
              {serviceBanners.map(banner => (
                <SwiperItem key={banner.id} onClick={() => handleBannerClick(banner)}>
                  <View className="banner-item">
                    <Image
                      src={banner.image}
                      mode="aspectFill"
                      className="banner-image"
                    />
                    <View className="banner-content">
                      <Text className="banner-title">{banner.title}</Text>
                      <Text className="banner-subtitle">{banner.subtitle}</Text>
                      <Text className="banner-description">{banner.description}</Text>
                      <Text className="banner-tag">{banner.tag}</Text>
                    </View>
                  </View>
                </SwiperItem>
              ))}
            </Swiper>
          </View>
        </View>

        {/* 服务分类区域 */}
        <View className="categories-section">
          <View className="section-header">
            <Text className="section-title">服务分类</Text>
            <Text className="section-subtitle">选择您需要的服务类型</Text>
          </View>
          <View className="categories-grid">
            {serviceCategories.map(category => (
              <View 
                key={category.id} 
                className="category-card"
                onClick={() => handleCategoryClick(category)}
              >
                <View className="category-icon" style={{ backgroundColor: category.color }}>
                  {category.icon}
                </View>
                <View className="category-info">
                  <Text className="category-name">{category.name}</Text>
                  <Text className="category-count">{category.count} 项服务</Text>
                </View>
              </View>
            ))}
          </View>
        </View>

        {/* 热门服务区域 */}
        <View className="hot-services-section">
          <View className="section-header">
            <Text className="section-title">热门服务</Text>
            <Text className="more-link">查看更多 &gt;</Text>
          </View>
          <View className="services-grid">
            {hotServices.map(service => (
              <View 
                key={service.id} 
                className="service-card"
                onClick={() => handleServiceClick(service)}
              >
                <Image src={service.image} mode="aspectFill" className="service-image" />
                <View className="service-info">
                  <Text className="service-name">{service.name}</Text>
                  <View className="service-price-info">
                    <Text className="service-price">{service.price}</Text>
                    <Text className="service-original-price">{service.originalPrice}</Text>
                  </View>
                  <View className="service-meta">
                    <Text className="service-rating">⭐ {service.rating}</Text>
                    <Text className="service-orders">已服务 {service.orders} 次</Text>
                  </View>
                  <View className="service-tags">
                    {service.tags.map((tag, index) => (
                      <Text key={index} className="service-tag">{tag}</Text>
                    ))}
                  </View>
                </View>
              </View>
            ))}
          </View>
        </View>

        {/* 服务资讯区域 */}
        <View className="news-section">
          <View className="section-header">
            <Text className="section-title">服务资讯</Text>
            <Text className="more-link">更多资讯 &gt;</Text>
          </View>
          <View className="news-grid">
            {serviceNews.map(news => (
              <View key={news.id} className="news-card">
                <View className="news-header">
                  <Text className="news-category">{news.category}</Text>
                  <Text className="news-time">{news.time}</Text>
                </View>
                <Text className="news-title">{news.title}</Text>
                <Text className="news-content">{news.content}</Text>
                <View className="news-footer">
                  <Text className="news-views">阅读 {news.views}</Text>
                  <Text className="news-read-more">阅读全文 &gt;</Text>
                </View>
              </View>
            ))}
          </View>
        </View>

        {/* 服务保障区域 */}
        <View className="guarantee-section">
          <View className="section-title">服务保障</View>
          <View className="guarantee-grid">
            <View className="guarantee-item">
              <Text className="guarantee-icon">🛡️</Text>
              <Text className="guarantee-title">质量保证</Text>
              <Text className="guarantee-desc">原厂配件，专业维修</Text>
            </View>
            <View className="guarantee-item">
              <Text className="guarantee-icon">⏰</Text>
              <Text className="guarantee-title">快速响应</Text>
              <Text className="guarantee-desc">24小时在线服务</Text>
            </View>
            <View className="guarantee-item">
              <Text className="guarantee-icon">🏠</Text>
              <Text className="guarantee-title">上门服务</Text>
              <Text className="guarantee-desc">免费上门检测</Text>
            </View>
            <View className="guarantee-item">
              <Text className="guarantee-icon">📞</Text>
              <Text className="guarantee-title">售后支持</Text>
              <Text className="guarantee-desc">专业售后团队</Text>
            </View>
          </View>
        </View>
      </View>

      {/* PC端底部信息 */}
      <View className="footer">
        <View className="footer-content">
          <View className="footer-section">
            <Text className="footer-title">联系我们</Text>
            <Text>客服热线：400-123-4567</Text>
            <Text>工作时间：9:00-21:00</Text>
            <Text>邮箱：service@jishixiu.com</Text>
          </View>
          <View className="footer-section">
            <Text className="footer-title">服务范围</Text>
            <Text>手机维修</Text>
            <Text>电脑维修</Text>
            <Text>家电维修</Text>
            <Text>数码维修</Text>
          </View>
          <View className="footer-section">
            <Text className="footer-title">关于我们</Text>
            <Text>公司简介</Text>
            <Text>服务条款</Text>
            <Text>隐私政策</Text>
            <Text>用户协议</Text>
          </View>
        </View>
        <Text className="copyright">© 2024 及时修服务平台. 版权所有.</Text>
      </View>
    </View>
  );
}
